<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../css/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../css/jQuery3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../css/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.header{
				background-color: #007BFF;
				width: 100%;
			}
			.logo{
				margin: 15px 0;
			}
			#menu{
				line-height: 50px;
			}
			.line{
				display: block;
				background-color: white;
			}
			.dropdown-item{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="comtainer">
				<div class="row">
					<!-- 左侧导航 -->
					<div class="clo-12 col-md-3">
						<div id="" class="logo">
							<a href="#">
								<img src="../img/logo.png" class="img-fluid">
							</a>
						</div>
					</div>
					<!-- 右侧导航 -->
					<div class="col-12 col-md-9">
						<nav class="navbar navbar-dark navbar-expand-md">
							<!-- 汉堡包导航 -->
							<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#menu">
								<span class="navbar-toggler-icon"></span>
							</button>
							<!-- 水平菜单 -->
							<div class="collapse navbar-collapse" id="menu">
								<ul class="navbar-nav" >
									<li class="nav-item">
										<!-- 触发器 -->
										<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">学校概况</a>
										<!-- 下拉菜单的的菜单 -->
										<div class="dropdown-menu">
											<span class="line"></span>
											<a href="#" class="dropdown-item">学校介绍</a>
											<a href="#" class="dropdown-item">领导介绍</a>
											<a href="#" class="dropdown-item">学校章程</a>
											<a href="#" class="dropdown-item">校园文化</a>
										</div>
									</li>
									<li class="item"><a href="#" class="nav-link">组织机构</a></li>
									<li class="item"><a href="#" class="nav-link">教育教学</a></li>
									<li class="item"><a href="#" class="nav-link">学科科研</a></li>
									<li class="item"><a href="#" class="nav-link">师资队伍</a></li>
									<li class="item"><a href="#" class="nav-link">招生就业</a></li>
									<li class="item"><a href="#" class="nav-link">国际交流</a></li>
									<li class="item"><a href="#" class="nav-link">信息公开</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
